<template>
	<view>
		<view style="width: 100%;height: 208rpx;background: #FFB24B;border-radius: 0px 0px 20px 20px;"></view>
		<view class="user-info">
			<view class="content">
				<view class="header-image">
					<image :src="userInfo.avatar" style="width: 150rpx;height: 150rpx;border-radius: 50%;">
					</image>
				</view>
				<view style="padding-top: 106rpx;display: flex;flex-direction: column;align-items: center;">
					<view style="color: #262626;font-size: 32rpx;padding-bottom: 20rpx;">{{userInfo.nickname}}</view>
					<view
						style="padding: 10rpx;background: #FFECD2;border-radius: 10px 4px 9px 5px;color: #E99320;font-size: 20rpx;">
						{{userInfo.label}}</view>
				</view>
				<view class="form">
					<!-- <view class="form-item flex">
						<view class="item-left">姓名</view>
						<view class="item-right">{{userInfo.realname}}</view>
					</view>
					<view class="form-item flex">
						<view class="item-left">生日</view>
						<view class="item-right">{{userInfo.birthday}}</view>
					</view>
					<view class="form-item flex">
						<view class="item-left">电话</view>
						<view class="item-right">{{userInfo.mobile}}</view>
					</view>
					<view class="form-item flex">
						<view class="item-left">微信号</view>
						<view class="item-right">{{userInfo.wechat}}</view>
					</view> -->
					
					<view class="form-item flex">
						<view class="item-left">学校</view>
						<view class="item-right">{{userInfo.school}}</view>
					</view>
					<view class="form-item flex">
						<view class="item-left">专业</view>
						<view class="item-right">{{userInfo.major}}</view>
					</view>
					<view class="form-item flex">
						<view class="item-left">星座</view>
						<view class="item-right">{{userInfo.constellation}}</view>
					</view>
					<view class="form-item flex" v-if="userInfo.intro"> 
						<view class="item-left">自我介绍</view>
						<view class="item-right">{{userInfo.intro}}</view>
					</view>
					<view class="form-item flex" v-if="userInfo.photo">
						<view class="item-left">照片</view>
						<image :src="userInfo.photo" mode="" style="width: 104rpx;height: 104rpx;" @tap="look"></image>
					</view>
				</view>
				<view></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				userInfo:{}
			}
		},
		onLoad(option) {
			this.$H.post(this.$api.get_creater_info,{id:option.id},{token:false}).then(res=>{
				console.log(res.data)
				this.userInfo = res.data
			})
		},
		methods:{
			look(){
				uni.previewImage({
					urls:[this.userInfo.photo]
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F3F3;
	}

	.user-info {
		position: absolute;
		top: 146rpx;
		right: 0;
		left: 0;
		padding: 0 30rpx;

		.content {
			position: relative;
			background-color: #fff;
			border-radius: 10px 10px 10px 10px;

			.header-image {
				position: absolute;
				top: -75rpx;
				right: 0;
				left: 0;
				text-align: center;
			}
			.form{
				padding: 15rpx 40rpx 0 40rpx;
				.form-item{
					padding: 30rpx 0;
					border-bottom: 1px solid #F8F8F8;
					.item-left{
						width: 250rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #848484;
					}
					.item-right{
						flex: 1;
						font-size: 28rpx;
						font-weight: 400;
						color: #444444;
					}
				}
			}
		}
	}
</style>
